<template>
  <div>
    <h2>vuex</h2>
    <!-- 使用state数据 -->
    <p>username：{{ $store.state.username }}</p>
    <p>age：{{ $store.state.age }}</p>
    <!-- getters计算属性 -->
    <p>age * age：{{ $store.getters.pf }}</p>
    <!-- 调用mutation方法 -->
    <button @click="$store.commit('updateAge', 2)">age + 2</button><br />
    <!-- 调用action方法 -->
    <button @click="$store.dispatch('updateAgeAfter3s', 3)">3s + 3</button>
    <br />
    <my-test></my-test>
  </div>
</template>

<script>
import MyTest from '@/components/MyTest.vue'
export default {
  components: { MyTest }
}
</script>
<style></style>
